import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import "../../CMDSender.js" as Controler

Item {
    id:root

    //init
    width: parent.width
    height:parent.height
    opacity: 0
    Component.onCompleted: {
        opacity=1;
    }
    Behavior on opacity {
        PropertyAnimation{
            properties: "opacity"
            duration: 500
        }
    }

    //datas model
    ListModel{
        id:lightModel
    }

    //lights list
    ListView{
        model: lightModel
        anchors.fill: parent
        delegate: Item{
            width: parent.width
            height: 0
            clip: true
            Behavior on height{
                PropertyAnimation{
                    properties: "height"
                    duration: 300
                    easing.type: Easing.OutQuint
                }
            }

            Component.onCompleted: {
                height=80*Device.dentisty

            }

            //light icon
            Image {
                id: icon
                source: "qrc:/imgs/control/smartHomeIcons/control/icon_light.png"
                width: 50*Device.dentisty
                height:width
                x:20*Device.dentisty
                anchors.verticalCenter: parent.verticalCenter
            }

            //light name
            Item{
                width: parent.width-200*Device.dentisty
                height: parent.height
                anchors.centerIn: parent
                clip:true
                Text{
                    text:name
                    anchors.centerIn: parent
                    font.pointSize: 20
                    color:"#ffffff"
                }
            }

            //switcher
            Switch{
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 20*Device.dentisty
                checked: powerOn
                onCheckedChanged:{
                    if(checked)
                        if(TcpSocket.tcpState==="connected")
                            TcpSocket.sendData(tname+"_open#!")
                        else
                            Controler.send(tname+"_open");
                    else
                        if(TcpSocket.tcpState==="connected")
                            TcpSocket.sendData(tname+"_close#!")
                        else
                            Controler.send(tname+"_close");

                    lightModel.setProperty(index,"powerOn",checked)
                }

                style:SwitchStyle{
                    groove: Image {
                        source:control.checked?"qrc:/imgs/control/smartHomeIcons/control/switcher_on.png":
                                                "qrc:/imgs/control/smartHomeIcons/control/switcher_off.png"
                    }
                    handle: Image{
                        source:"qrc:/imgs/control/smartHomeIcons/control/switcher_drigger.png"
                    }
                }

            }

            //line
            Image {
                id: line
                source: "qrc:/imgs/control/smartHomeIcons/control/icon_line.png"
                anchors.bottom: parent.bottom
                width: parent.width
                visible: index!==lightModel.count-1
            }
        }
    }

    //init worker
    Timer{
        id:worker
        interval: 100
        property int count:0
        running: count<=5
        repeat: true
        onTriggered: {
            lightModel.append({
                                  "name":"排灯"+String(count+1),
                                  "powerOn":true,
                                  "tname":"light_0"+(count+1)
                              });
            count++;
        }
    }
}
